<template>
    <div class="matchGround">
        <div class="row">
            <div class="col-4">
                <div class="user-photo">
                    <img :src="$store.state.user.photo" alt="">
                    <!-- 导入全局变量中当前用户的头像 -->
                </div>
                <div class="user-username">
                    {{ $store.state.user.username }}
                    <!-- 导入全局变量中当前用户的名称 -->
                </div>
            </div>

            <div class="col-4">
                <div class="user-select-bot">
                    <select v-model="select_bot" class="form-select" aria-label="Default select example"><!--v-model 选择后的数据的双向绑定-->
                        <option value="-1" selected>亲自上阵</option><!--下面要自动获取bot列表-->
                        <option v-for="bot in bots" :key="bot.id" :value="bot.id">{{bot.title}}</option>
                      </select><!--动态获取后端bot，显示bot的名称-->
                </div>
            </div>

            <div class="col-4">

                <div class="user-photo">
                    <img :src="$store.state.pk.opponent_photo" alt="">
                    <!-- 导入全局变量中对手的头像 -->
                </div>
                <div class="user-username">
                    {{ $store.state.pk.opponent_username }}
                    <!-- 导入全局变量中对手的名称 -->
                </div>
            </div>
            <div class="col-12" style="text-align: center;padding-top: 15vh;"><!--居中，且位置下移-->
                <button @click="click_match_btn" type="button" class="btn btn-danger btn-lg">{{ match_btn_info }}</button>
                <!--绑定点击按钮事件，更改按钮名称--><!--btn-lg是放大按钮-->
            </div>
            
        </div>
    </div>
</template>

<script>
import {ref} from 'vue'
import { useStore } from 'vuex';
// import $ from 'jquery'

export default{
    setup(){
        const store = useStore();//引入全局变量
        let match_btn_info = ref("开始匹配");//按钮显示，初始为开始匹配

        let select_bot = ref("-1");//用于双向绑定，选中的bot的id,默认-1是亲自出马
        
        const click_match_btn = () => {
            if(match_btn_info.value === "开始匹配"){//点击之后，改变按钮名称
                match_btn_info.value = "取消";

                // console.log(select_bot.value);
                if(store.state.pk.socket)
                    store.state.pk.socket.send(JSON.stringify({//表示把json数据转换成字符串
                        event: "start-matching",
                    }));
                else
                    console.log("没有链接")
            }else{
                match_btn_info.value = "开始匹配";
                store.state.pk.socket.send(JSON.stringify({//表示把json数据转换成字符串
                    event: "stop-matching",
                }));
            }
        }

        return{//必须返回之后，才能在上面引用
            match_btn_info,
            click_match_btn,

            select_bot,//用于双向绑定，在上下连结
        }
    }
}

</script>

<style scoped>
    div.matchGround {
        width: 60vw;  
        height: 70vh;	
        background: rgb(50, 50, 50, 0.5); /*背景改成透明的灰色*/
        margin: 40px auto; 
    }
    div.user-photo {
        text-align: center;/* 用户头像居中 */
        padding-top: 10vh;/*设置上边距*/
    }
    div.user-photo > img {
        border-radius: 50%; /* 用户头像变成圆形 */
        width: 20vh;/*图片变小点*/
    }
    div.user-username {
        text-align: center;/*用户名居中*/
        font-size: 24px;/*字体变大*/
        font-weight: 600;/*加粗*/ 
        color: white;/*字体颜色*/
        padding-top: 2vh;/*加大用户名和头像的距离*/
    }

    div.user-select-bot{/*选择框居中*/
        padding-top: 20vh;
    }
    div.user-select-bot > select{
        width: 60%;/*设置宽度*/
        margin: 0 auto;/*居中*/
    }
</style>